// webpack配置文件，使用node.js语法和commonJS模块化机制

// 引入node.js内置path模块
const { resolve } = require('path');

// 引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'inline-source-map',
  // 1.设置入口文件
  entry: './src/index.js',
  // entry: {
  //   index1: './src/index.js',
  //   index2: './src/js/a.js',
  // },
  // 2.设置出口文件
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'js/index-dev.js',
    // filename: 'js/[name]-dev.js',
    publicPath: ''
  },
  // 3.加载器
  module: {
    rules: [
      {
        test: /\.css$/i,
        // use: ['style-loader', 'css-loader']
        use: [{
          loader: 'file-loader',
          options: {
            outputPath: 'styles'
          }
        }],
        exclude: /node_modules/,
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.html$/,
        use: 'html-loader'
      },
      {
        test: /\.png|jpg|jpeg|gif$/i,
        use: [{
          loader: 'file-loader',
          options: {
            outputPath: 'images'
          }
        }]
      }
    ]
  },
  // 4.配置插件
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/main.html'
    })
  ],
  // 5.设置打包模式
  mode: 'development',
  // 6.设置webpack开发服务器
  devServer: {
    static: './build',
    compress: true,
    port: 3000,
    open: true
  }
}